<!--自定义的描述列表-->
<template>
  <n-descriptions label-placement="left" class="py-2" :column="props.column" bordered  label-align="left" size="small">
    <n-descriptions-item v-for="(item,index) in xinxiList">
      <template #label>
        <div class="min-w-100px">{{item.label}}</div>
      </template>
      <slot v-if="item.slot" :name="item.slot" :value="item" :index="index"></slot>
      <p v-else class="min-w-100px truncate">{{item.value || props.kong}}</p>
    </n-descriptions-item>
  </n-descriptions>
</template>

<script setup name='descriptions' lang='ts'>
import {defineProps,computed} from "vue"
const props = defineProps({
  infoList:{
    type:Array,
    default: [],
  },
  kong:{
    type:String,
    default:"---",
  },
  // 描述列表的列数，默认是1列
  column:{
    type:Number,
    default:1,
    validator(value:number) {
      return value >= 1
    },
  },
})

const xinxiList = computed(()=>{
  return props.infoList.filter((item:any)=>!item.hidden)
})
</script>

<style>
.n-descriptions-table-header{
  width: 100px;
}
</style>
